<!DOCTYPE html>
<html class="desktop landscape">
	<head>
		<title>选择时间</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link href="/static/api/yuyue/css/am_min.css" rel="stylesheet" type="text/css" />
		<link href="/static/api/yuyue/css/page_min.css" rel="stylesheet" type="text/css" />
		<link href="/static/api/yuyue/css/black.css" rel="stylesheet" type="text/css" />
	</head>
<body class="theme1">
<div id="box">
	<div class="am-widthLimite am-touchable" style="">
		<div class="am-app" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
			<div class="am-page page_reservation am-touchable" id="page_reservation" style="display: block; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
				<div class="reservation_timeLine">
					<div class="time_wrap am-touchable">
						<ul class="time_inner" style="width: 1440px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
							<template v-for="(item,index) in daylist">
								<li :class="item.select_type ? 'am-clickable selected' : 'am-clickable' " v-on:click="chooseday(item.timestamp,index)">
									<div class="date">${item.mymonth}/${item.myday}</div>
									<div class="day">${item.myweek}</div>
								</li>
							</template>
						</ul>
					</div>
				</div>
				<div class="am-body-wrap am-touchable" style="top: 49px; bottom: 41px;">
					<div class="am-body-inner">
						<div class="reservation_timeArea">
							<div class="timeHead">
								<div class="text">上午</div>
							</div>
							<div class="timeList">
								<ul>
									<li v-for="(item,index) in timelist" v-if="index <= 7" v-on:click="choosetime(item.mytime,index)">
										<div :class="[item.classA,item.selected_class,item.jin_class]">${item.mytime}</div>
									</li>
								</ul>
								<div class="clear"></div>
							</div>
							<div class="timeHead">
								<div class="text">下午</div>
							</div>
							<div class="timeList">
								<ul>
									<li v-for="(item,index) in timelist" v-if="index > 7 && index <= 19" v-on:click="choosetime(item.mytime,index)">
										<div :class="[item.classA,item.selected_class,item.jin_class]">${item.mytime}</div>
									</li>
								</ul>
								<div class="clear"></div>
							</div>
							<div class="timeHead">
								<div class="text">晚上</div>
							</div>
							<div class="timeList">
								<ul>
									<li v-for="(item,index) in timelist" v-if="index > 19 && index <= 23" v-on:click="choosetime(item.mytime,index)">
										<div :class="[item.classA,item.selected_class,item.jin_class]">${item.mytime}</div>
									</li>
								</ul>
								<div class="clear"></div>
							</div>
						</div>
						<div class="timeLimit">注：预约当天服务需要提前30分钟</div>
					</div>
				</div>
				<div class="reservation_next am-placeholder">
					<div class="page_button next_step blue am-clickable" v-on:click="next_step()">下一步</div>
					<div class="page_button next_step blue am-clickable timepassed" v-on:click="myyuyue()">我的预约</div>
					<div class="label">时间选择:</div>
					<div class="value timeSelect">${select_day}&nbsp;${select_time}</div>
				</div>
			</div>

			<div class="am-page page_barberList" id="page_barberList" style="display: none; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5000, 0, 0, 1);">
				<div class="am-body-wrap am-touchable" style="top: 125px; bottom: 0px;">
					<div class="am-body-inner" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"></div>
				</div>
			</div>
		</div>
	</div>

	<input type='hidden' name='user_id' id='user_id' value="{{user_id}}">
	<input type='hidden' name='sMobile' id='sMobile' value="{{sMobile}}">
	<input type='hidden' name='sName' id='sName' value="{{sName}}">
</div>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="http://commfile.oss-cn-shanghai.aliyuncs.com/js/layer.js"></script>
</body>
</html>
<script type='text/javascript'>
var vm; //定义vm全局变量
var vm = new Vue({
	el: '#box',
	data: {
		daylist: '',					//日期数组
		select_day: '',					//选中的日期
		timelist: '',					//时间段数组
		select_time: '',				//选中的时间段
		year: '',						//选中的日期的年
		month: '',						//选中的日期的月
		day: '',						//选中的日期的日期
		timestamp: '',					//选中的时间的时间戳
	},
	methods: {
        getMyweek: function() {
            var timestamp = Date.parse(new Date());
            var list = [];
            for(var i = 0;i<=7;i++) {
                var nowdate = timestamp + 86400000 * i;
                var nowstamp = new Date(nowdate);
				//获取哪一年
				var myyear = nowstamp.getFullYear();
                //获取月份
                var mymonth = nowstamp.getMonth() + 1;
                //获取天数
                var myday = nowstamp.getDate();
                //获取周几
                var myweekday = nowstamp.getDay();

                switch(myweekday)
                {
                    case 0:
                        myweek = '周日';
                    break;
                    case 1:
                        myweek = '周一';
                    break;
                    case 2:
                        myweek = '周二';
                    break;
                    case 3:
                        myweek = '周三';
                    break;
                    case 4:
                        myweek = '周四';
                    break;
                    case 5:
                        myweek = '周五';
                    break;
                    case 6:
                        myweek = '周六';
                    break;
                }

                if (0 == i) {
                    var select_type = true;
					myweek = '今天';
                } else {
                    var select_type = false;
                }

                list.push({'myyear':myyear,'mymonth':mymonth,'myday':myday,myweek:myweek,'timestamp':nowdate,'select_type':select_type});

            }

            this.daylist = list;
            this.select_day = '今天';

			//给数据绑定年，月，日
			var nowstamp = new Date();
			this.year = nowstamp.getFullYear();
			this.month = nowstamp.getMonth();
			this.day = nowstamp.getDate();
        },
        chooseday: function(timestamp,index) {
            for (var i=0;i<this.daylist.length;i++) {
                //先将其他时间点的选中class去掉
                this.daylist[i].select_type = false;
            }

			for (var j=0;j<this.timelist.length;j++) {
				//将选中的状态class去掉
				this.timelist[j].selected_class = false;
			}

			//将选中的时间点class加上
			this.daylist[index].select_type = true;
			var mymonth = ('00' + (this.daylist[index].mymonth - 1)).substr(-2,2);
			var myday = ('00' + this.daylist[index].myday).substr(-2,2);

			this.select_day = this.daylist[index].myweek;

			//给数据绑定年,月，日
			this.year = this.daylist[index].myyear;
			this.month = mymonth;
			this.day = myday;

			//将选中的时间戳赋为空
			this.timestamp = '';
			this.select_time = '';

			this.getYuyuelist();
        },
		getTimelist: function() {
			var timelist = [];
			timelist = [
				{'mytime': "08:00-08:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "08:30-09:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "09:00-09:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "09:30-10:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "10:00-10:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "10:30-11:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "11:00-11:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "11:30-12:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "12:00-12:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "12:30-13:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "13:00-13:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "13:30-14:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "14:00-14:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "14:30-15:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "15:00-15:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "15:30-16:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "16:00-16:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "16:30-17:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "17:00-17:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "17:30-18:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "18:00-18:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "18:30-19:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "19:00-19:30","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
				{'mytime': "19:30-20:00","classA":"timeBtn am-clickable","selected_class":false,"jin_class":false},
			];

			this.timelist = timelist;
		},
		choosetime: function(mytime,index) {
			//如果选中的是禁选的,则return
			if (this.timelist[index].jin_class == 'timepassed') {
				return false;
			}

			for (var i=0;i<this.timelist.length;i++) {
				//先将其他的li选中状态取消
				this.timelist[i].selected_class = false;
			}

			//将选中的li加上选中状态
			this.timelist[index].selected_class = 'selected';
			this.select_time = mytime;
			var timestamp2 = new Date(parseInt(this.year),parseInt(this.month),parseInt(this.day),parseInt(mytime.substr(0,2)),parseInt(mytime.substr(3,2)),00);
			var timestamp = Date.parse(timestamp2)/1000;
			this.timestamp = timestamp;
		},
		next_step: function() {
			//获取user_id
			var user_id = document.getElementById('user_id').value;
			var sMobile = document.getElementById('sMobile').value
			var sName = document.getElementById('sName').value

			//获取预约的开始时间的时间戳
			var yuyue_time = this.timestamp;

			if (this.timestamp == '') {
				alert('请选择时间!');

				return false;
			}

			window.location.href = "/wxfen/wxfen/yuyuexm.html?user_id="+user_id+"&yuyue_time="+yuyue_time+"&sMobile="+sMobile+"&sName="+sName;
		},
		getYuyuelist: function() {
			//获取user_id
			var user_id = document.getElementById('user_id').value;
			//获取选中的时间日期
			var begin_time = new Date(parseInt(this.year),parseInt(this.month),parseInt(this.day),00,00,00);
			var begin_timestamp = Date.parse(begin_time)/1000;
			var end_time = new Date(parseInt(this.year),parseInt(this.month),parseInt(this.day),23,59,59);
			var end_timestamp = Date.parse(end_time)/1000;

			layer.open({
				type: 2,
				content: '加载中',
				shade: 'background-color: rgba(0,0,0,0.3)',
				shadeClose: false,
			});

			setTimeout(function() {
				$.ajax({
					type: 'post',
					url: '/wxfen/wxfen/getyuyuelist',
					data: {
						"user_id":user_id,
						"begin_time":begin_timestamp,
						"end_time":end_timestamp,
					},
					success: function(ret) {
						if (100 == ret.code) {
							for (var i=0;i<ret.data.length;i++) {
								var yuyuestamp = ret.data[i].yuyue_time * 1000;
								var yuyuehour = ('00' + (new Date(yuyuestamp)).getHours()).substr(-2,2);
								var yuyueminute = ('00' + (new Date(yuyuestamp)).getMinutes()).substr(-2,2);
								var mytime = yuyuehour + ':' + yuyueminute;

								for (var j=0;j<vm.timelist.length;j++) {
									if (mytime == vm.timelist[j].mytime.substr(0,5)) {
										vm.timelist[j].jin_class = 'timepassed';
									}
								}
							}

							//关闭loading层
							layer.closeAll();
						} else {
							for (var j=0;j<vm.timelist.length;j++) {
								//先将禁选的class属性去掉
								vm.timelist[j].jin_class = false;
							}

							//关闭loading层
							layer.closeAll();
						}
					},
					error: function(err) {
						//关闭loading层
						layer.closeAll();

						alert(JSON.stringify(err));
					}
				});
			},500);
		},
		myyuyue: function() {
			var sMobile = document.getElementById('sMobile').value;
			var sName = document.getElementById('sName').value;

			window.location.href = "/wxfen/wxfen/myyuyue.html?sMobile="+sMobile+"&sName="+sName;
		},
    },
    mounted: function() {
		//获取一周的时间数组
		this.getMyweek();
		//获取每天的时间段
		this.getTimelist();
		//获取每一位美容师的预约情况
		this.getYuyuelist();
    },
    delimiters:['${', '}'],
});
</script>
